import React, { PureComponent } from 'react'
import { StyleSheet, View, Image, Text, ImageBackground, FlatList, TouchableOpacity, Modal, } from 'react-native'
import NewPersonDiscountCouponItem from './NewPersonDiscountCouponItem'
import { screen, system } from '../../common'
type Props = {
    show: boolean,
}
type State = {
    showView: boolean,
}


const newpersonredpacketInfo = [
    { price: '3', uselimit: '无限制', startusetime: '2018.05.21', endusetime: '2018.12.31' },
    { price: '5', uselimit: '无限制', startusetime: '2018.05.21', endusetime: '2018.12.31' },
    { price: '10', uselimit: '无限制', startusetime: '2018.05.21', endusetime: '2018.12.31' },
    { price: '15', uselimit: '满50元可用', startusetime: '2018.05.21', endusetime: '2018.12.31' },
    { price: '50', uselimit: '满100元可用', startusetime: '2018.05.21', endusetime: '2018.12.31' },
]

class NewPersonDiscountCoupon extends PureComponent<Props, State>{

    constructor(props: Object) {
        super(props)

        this.state = {
            showView: false
        }
    }



    renderModal = (info: Object) => {
        return (
            <NewPersonDiscountCouponItem
                info={info.item}
            />
        )
    }
    //更改showView的值
    _setModalVisible() {
        let isShow = this.state.showView;
        this.setState({
            showView: !isShow,
        })
        
    }

    render() {
        //控制是否显示
        let isShowView = this.state.showView != this.props.show

        return (
            <Modal
                animationType='slide'
                transparent={true}
                visible={isShowView}
                onShow={() => { }}
                onRequestClose={() => { }} >
                {/*整个弹框的样式：包括可见和不可见的部分*/}
                <View style={styles.modalStyle}>
                    {/*弹框可见部分的样式*/}
                    <View style={styles.subView}>
                        {/*弹框上半部分的背景图片*/}
                        <ImageBackground style={styles.backgroundImage} resizeMode={'stretch'} source={require('../../img/mine/ModalTest.png')} >
                            {/*弹框的上半部分样式*/}
                            <View style={styles.halfStyle}>
                                {/*弹框主标题和子标题部分样式*/}
                                <View style={styles.titleStyle}>
                                    {/*弹框主标题样式*/}
                                    <Text style={styles.titleText}>
                                        新人红包
                                        </Text>
                                    {/*弹框子标题样式*/}
                                    <Text style={styles.subtitleText}>
                                        数量有限，先到先得哦
                                        </Text>
                                </View>
                                {/*弹框list部分样式*/}
                                <View style={styles.listStyle}>
                                    <FlatList
                                        data={newpersonredpacketInfo}
                                        renderItem={this.renderModal}
                                    />
                                </View>
                            </View>
                        </ImageBackground>
                        {/*弹框上半部分和下半部分的分割线*/}
                        <View style={styles.horizontalLine}></View>
                        {/*弹框下半部分的样式*/}
                        <View style={styles.halfBottomStyle}>
                            {/*弹框按钮的样式*/}
                            <TouchableOpacity
                                style={styles.buttonStyle}
                                onPress={() => {
                                    this._setModalVisible()
                                }}>
                                {/*弹框按钮中的字的样式*/}
                                <Text style={styles.buttonTextStyle}>知道了</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </Modal>
        )
    }
}
const styles = StyleSheet.create({
    // modal的样式  
    modalStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
    },
    // modal上子View的样式  
    subView: {

        // marginLeft: 80,
        // marginRight: 80,
        width:screen.width*0.8,
        backgroundColor: '#fff',
        // alignSelf: 'stretch',
        justifyContent: 'center',
        borderRadius: 10,
        borderWidth: 0.5,
        borderColor: '#ccc',
        alignItems: 'center',
        height: screen.height / 2,
    },
    //上半部分的整体样式
    halfStyle: {
        height: screen.height *0.45,
    },
    titleStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        height: screen.height*0.08,
        marginBottom: screen.height*0.005,
        marginTop: screen.height*0.005,
        //screen.height*0.005为5
    },
    // 标题  
    titleText: {
        marginTop: screen.height*0.01,
        marginBottom: screen.height*0.005,
        fontSize: 30,
        fontWeight: 'bold',
        textAlign: 'center',
        color: 'white',
    },
    // 副标题  
    subtitleText: {
        fontSize: 15,
        textAlign: 'center',
        color: 'white',

    },
    // 水平的分割线  
    horizontalLine: {
        // marginTop: 5,
        height: 4,
        backgroundColor: '#FFD700',
        width:screen.width*0.8,
    },
    // 按钮  
    halfBottomStyle: {
        width: screen.width*0.8,
        alignItems: 'center',
        height: screen.height*0.08,
        justifyContent: 'center',
        backgroundColor: 'red'
    },
    buttonStyle: {
        width: screen.width*0.6,
        height: screen.height*0.05,
        borderRadius: 10,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#E3CF57'
    },
    buttonText: {
        fontSize: 16,
        color: '#3393F2',
        textAlign: 'center',
    },
    backgroundImage: {
        width: screen.width*0.82,
        height: screen.height*0.43,
    },
    listStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        height: screen.height*0.35,
    },
    buttonTextStyle: {
        fontWeight: 'bold',
        fontSize: 27,
        color: 'white',
    },
})
export default NewPersonDiscountCoupon